import Style from './style.less';
import React from 'react';
import Card, {CardHeader, CardContent, CardActions} from 'material-ui/Card';
import TextField from 'material-ui/TextField';
import {ConfirmButton} from 'components/buttons';

export default class Form extends React.Component {

  constructor(...args) {
    super(...args);
    this.form = {
      name: '',
      degree: '',
      title: '',
      master: ''
    };
    this.fields = ['name', 'degree', 'title', 'master'];
    this.dict = {
      name: '姓名',
      degree: '官阶',
      title: '职位',
      master: '考核人'
    };
    this.title="《大秦文臣武将年度考核调查表》";
    this.subtitle="君叫臣死，臣不得不死。"
  }

  handleFormSubmit = () => {
    console.log(this.form);
  };

  renderFields() {
    return this.fields.map((field, index) => {
      return <TextField
        fullWidth
        key={index}
        id={field}
        name={field}
        defaultValue={this.form[field]}
        onChange={e => {this.form[field] = e.target.value}}
        label={this.dict[field]}
        style={{marginBottom: 20}}
      />
    });
  }

  render() {

    console.log(`render <${this.constructor.name}>`);

    return (
      <Card style={{boxShadow: 'none'}}>
        <CardHeader
          title={this.title}
          style={{textAlign: 'center'}}
        />
        <CardContent>
          <div className={Style['form-wrap']}>
            {this.renderFields()}
          </div>
        </CardContent>
        <CardActions style={{justifyContent: 'center'}}>
          <ConfirmButton onClick={this.handleFormSubmit}>提交</ConfirmButton>
        </CardActions>
      </Card>
    )
  }
}